<template>
  <div class="videoInvite" id="videoInviteBox">
    <div class="left"> 
      <div class="button cancelButton iconfont icon-guaduan2" @click="rejectVideo"></div>
      <div class="button answerButton iconfont" :class="videoInvitedData.videoType === 'video' ? 'icon-shipinjieting' : 'icon-jieting'" @click="acceptVideo"></div>
      <div v-if="videoInvitedData.videoType === 'video'" class="button answerVoiceButton iconfont icon-yuyin" @click="acceptVideo('voice')"></div>
    </div>
    <div v-if="videoInvitedData.videoType === 'video'" class="left_background_top"></div>
    <div class="left_background"></div>
    <div class="right">
      <div class="invite" v-if="videoInvitedData.videoType === 'video'" @click="location">
        <p>{{$t('webchat.visitor')}}{{name}}</p>
        <p>{{$t('videoChat.videoInviteing')}}</p>
      </div>
      <div class="invite" v-if="videoInvitedData.videoType === 'voice'" @click="location">
        <p>{{$t('webchat.visitor')}}{{name}}</p>
        <p>{{$t('videoChat.voiceInviteing')}}</p>
      </div>
    </div>
    <audio :src="videoMusic" id="m7_video_invite"></audio>
  </div>
</template>

<script>
  import CustomerAvatar from '@/components/ui-modules/customer-avatar/CustomerAvatar'
  import {m7UpHosts} from '@/utils/qiniuUtils'
  import * as webchatTypes from '@/store/modules/webchat/mutation-types'
  export default {
    name: 'videoInvite',
    data () {
      return {
        openCamera: true,
        videoMusic: ''
      }
    },
    methods: {
      location () {
        if (this.$route.path.substring('/index/webchat/webchat_todo/'.length) === this.videoInvitedData.videoInviteSessionid) {
          this.$nextTick(function () {
            document.getElementsByClassName('send_msg_textarea')[0].focus()
          })
        } else {
          this.$router.push({path: '/index/webchat/webchat_todo/' + this.videoInvitedData.videoInviteSessionid})
        }
      },
      rejectVideo () {
        var originator = this.$store.state.webchat.invitePersonnel || 'agent'
        let msg = {
          _id: this.videoInvitedData.videoInviteSessionid,
          operation: 'refuse',
          originator: originator
        }
        this.$store.dispatch('rejectVideoInvite', msg)
      },
      acceptVideo (flag) {
        let videomsg = {
          videoSessionid: this.videoInvitedData.videoInviteSessionid,
          videoUsername: this.name,
          videoToken: this.videoInvitedData.videoInviteToken,
          videoSource: 'invited',
          roomId: this.videoInvitedData.roomId,
          password: this.videoInvitedData.password,
          videoType: this.videoInvitedData.videoType
        }
        if (flag === 'voice') {
          videomsg.videoType = 'voice'
        }
        var originator = this.$store.state.webchat.invitePersonnel || 'agent'
        let msg = {
          _id: this.videoInvitedData.videoInviteSessionid,
          operation: 'accept',
          originator: originator
        }
        this.$store.dispatch('acceptVideoInvite', msg)
        this.$store.commit(webchatTypes.UPDATE_VIDEO_INVITE_STATUS, false)
        this.$store.commit(webchatTypes.UPDATE_VIDEO_CHAT_STATUS, true)
        this.$store.commit(webchatTypes.UPDATE_VIDEO_CHATDATA, videomsg)
//         因为在视频模块中判断需要，此处取反
        // this.$store.commit(webchatTypes.UPDATE_HIDE_VIDEO_CAMERA_STATU, !this.openCamera)
      }
    },
    computed: {
      videoInvitedData () {
        return this.$store.state.webchat.videoInvitedData
      },
      name () {
        let self = this
        let name
        this.$store.state.webchat.webchatList.webchat_todo.list.forEach(function (item, index) {
          if (item._id === self.videoInvitedData.videoInviteSessionid) {
            name = item.sName
          }
        })
        return name
      },
      cust_status () {
        let self = this
        let img
        this.$store.state.webchat.webchatList.webchat_todo.list.forEach(function (item, index) {
          if (item._id === self.videoInvitedData.videoInviteSessionid) {
            img = item.cust_status
          }
        })
        return img
      }
    },
    mounted () {
      this.videoMusic = m7UpHosts ? '/static/audio/im/warning.mp3' : '//fs-im-kefu.7moor.com/warning.mp3'
      let isOn = true
      if (window.sessionStorage.getItem('loginData')) {
        let loginForm = JSON.parse(window.sessionStorage.getItem('loginData'))
        if (window.localStorage.getItem(loginForm.loginName)) {
          isOn = JSON.parse(window.localStorage.getItem(loginForm.loginName)).isOn
        }
      }
      this.$nextTick(function () {
        // 此处需在nextTick之后执行，因为页面刚刚渲染的时候，audio标签尚未渲染出来src
        if (isOn) { // 是否播放音乐
          var music = document.getElementById('m7_video_invite')
          let playPromise = music.play()
            if (playPromise !== undefined) { // 异常捕获
              playPromise.then(_ => {
              }).catch(error => {
                console.log(error)
                music.load()
              })
            }
        }
      })
      let drag = document.getElementById('videoInviteBox')
      // 初始top值
      let clientHeight = document.body.clientHeight
      let iniTop = 60     // 初始化位置，距离顶部60px
      drag.style.top = iniTop + 'px'
      let self = this
      drag.onmousedown = function (ev) {
        let clientY = ev.clientY
        let domY = drag.offsetTop
        let disY = clientY - domY
        let clientHeight = document.body.clientHeight
        document.onmousemove = function (event) {
          event.preventDefault();
          let moveY = event.clientY - disY
          // 边界设置
          if (moveY < 54) {
            moveY = 54
          }
          if (moveY > clientHeight - 100) {
            moveY = clientHeight - 100
          }
          drag.style.top = moveY + 'px'
          event.stopPropagation()
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          e.stopPropagation()
        }
        ev.stopPropagation()
      }
    },
    components: {
      CustomerAvatar
    }
  }
</script>

<style type="text/stylus" lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .cursorpointer
    cursor pointer
  .left,.right
    display inline-block
    height 100%
    overflow hidden
  .left
    z-index 2
    width 40%
    position relative
  .right
    width 58%
    line-height 100px
    cursor move
  .videoInvite
    position fixed
    top 54px
    right 0
    width 300px
    height 100px
    background-color #666
    box-shadow 0 0 5px
    z-index 100
    border-radius 60px 0 0 60px
    transition all 0.1s
    .invite
      text-align left
      color $cf-white
      cursor pointer
      line-height 14px
      display inline-block
      vertical-align middle
      width 100%
      p
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
        width 100%
      p:nth-child(1)
        font-size 18px
  .button
    display inline-block
    border-radius 50%
    color #fff
    cursor pointer
    display inline-block
    border-radius 50%
    color #fff
    cursor pointer
    position absolute
    text-align center
  .answerButton
    width 66px
    height 66px
    top 16px
    left 14px
    background #6CF07D
    font-size 30px
    line-height 70px
  .cancelButton
    background #FF7752
    width 24px
    height 24px
    line-height 24px
    z-index 2
    left 80px
    top 66px
  .answerVoiceButton
    background #FFFFFF
    color #459AE9
    width 20px
    height 20px
    line-height 20px
    font-size 14px
    text-align center
    z-index 2
    left 82px
    top 10px
  .m7_video_invite
    display none
  .left_background
    display inline-block
    position absolute
    width 120px
    height 98px
    left 2px
    top 2px
    background url('./img/bg_video_invite.png') no-repeat
    background-size 120px 98px
  .left_background_top
    display inline-block
    background url('./img/bg_video_invite2.png') no-repeat
    background-size 36px 36px
    position absolute
    display inline-block
    position absolute
    width 36px
    height 36px
    left 72px
    top 4px
</style>
